iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

JavaScript 筆記 2 版系列 第 26

JavaScript Day26 - Async、Await

  • 分享至 

  • xImage
  •  

ES7:Async、Await

  • asyncasync 寫在函式前面,表示函式是非同步的,回傳值是 Promise,所以可以接續使用 then 進行後續處理
  • awaitawait 要寫在 async 內部,await 後面接的是一個 Promise,等待 Promise 的狀態被 resolved,之後才會繼續執行下一段程式,類似 then
  • 想要接 Promise 的 catch 可以使用 try catch

參考 MDN 的例子比較

// 使用 promise 寫法
function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url); // returns a promise
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}

// 使用 async await
async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); // 對應 return
  } catch(e) {
    v = await downloadFallbackData(url); // 對應 .catch
  }
  return processDataInWorker(v); // 對應 .then
}

等待處理的例子

function resolveAfterXSeconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
      console.log(`${x} Seconds`);
    }, x*1000);
  });
}


async function add(x) {
  const a = await resolveAfterXSeconds(3); // a 先執行
  const b = await resolveAfterXSeconds(2); // 等 a 執行完
  return x + a + b;
}

add(10).then(v => {
  console.log(v);  // prints 15 
});
// 3 Seconds 等 a 執行完
// 2 Seconds 等 b 執行完
// 15 (5秒後 10 + 3 + 2 = 15)

參考資料

MDN async function
鐵人賽:JavaScript Await 與 Async
JavaScript基本功修練:Day26 - Promise的語法糖:async/await
簡單理解 JavaScript Async 和 Await
JS 原力覺醒 Day16 - Async / Await:Promise 語法糖
【Day 11】穿越 ES6 邁向 ES7 的 async/await

次回

來說說 IIFE


上一篇
JavaScript Day25 - Promise(2)
下一篇
JavaScript Day27 - IIFE (立即函式)
系列文
JavaScript 筆記 2 版31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言